<template>
  <el-container>
    <el-main>
      <div class="title">学生登录</div>
      <div>
        <el-form ref="form" :model="user" :rules="rules" class="form">
          <el-form-item prop="email">
            <el-input v-model="user.email" placeholder="请输入邮箱" @keydown.enter.native="keyDown"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="user.password" type="password" placeholder="请输入密码"
                      @keydown.enter.native="keyDown"></el-input>
          </el-form-item>
          <el-button @click="click" type="primary">登录</el-button>
          <div class="login">
            <a href="TeachersLogin">教师登录</a>
          </div>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Rules from "@/components/Rules";
import {request} from "@/network/request";
import {LevelJudge} from "@/components/function/LevelJudge";

export default {
  name: "StudentsLogin",
  data() {
    return {
      user: {
        email: '',
        password: ''
      },
      rules: {
        email: Rules.rules.email,
        password: Rules.rules.userpwd
      }
    }
  },
  mounted() {
    this.storeNull();
  },

  methods: {
    storeNull() {
      this.$store.commit('mail', null);
      this.$store.commit('level', null);
    },
    keyDown(e) {
      if (e.keyCode == 13) {  //用户点击了ctrl+enter触发
        this.click();
      } else { //用户点击了enter触发
        return;
      }
    },
    click() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 判断邮箱是否存在
          request({
            url: '/login/mailList',
            params: {
              mail: this.$data.user.email
            }
          }).then(res => {
            if (res.data.success) {
              this.$message({
                type: 'warning',
                message: res.data.message
              })
            } else {
              // 判断通过,开始验证
              request({
                url: '/login/login',
                params: {
                  username: this.$data.user.email,
                  userpwd: this.$data.user.password,
                  level: 2
                }
              }).then(res => {
                if (res.data.success) {
                  this.$message({
                    type: "success",
                    message: "你好" + res.data.data[0].username + LevelJudge(res.data.data[0].level)
                  })
                  this.$store.commit("username", res.data.data[0].username)
                  this.$store.commit("mail", res.data.data[0].mail)
                  this.$store.commit("level", res.data.data[0].level);
                  this.$store.commit("grade", res.data.data[0].grade);
                  this.$router.push('/index');
                } else {
                  this.$message({
                    type: 'warning',
                    message: res.data.message
                  })
                }
              }).catch(err => {
                this.$message({
                  type: 'warning',
                  message: '数据错误' + err
                })
              })
            }
          }).catch(err => {
            this.$message({
              type: 'warning',
              message: '数据错误' + err
            })
          })
        } else {
          this.$message({
            type: 'warning',
            message: '校验失败'
          });
        }
      })
    }
  }
}
</script>

<style>
.title {
  text-align: center;
  margin: 0px auto 30px auto;
  font-size: 30px;
  font-weight: bolder;
}

.form input {
  border: none;
  border-bottom: solid 2px #ababab;
  border-radius: 0px;
  margin: 20px auto;
  background: none;
}

.form button {
  width: 100%;
  height: 40px;
  margin: 20px auto;
  font-size: 20px;
}

.login a {
  float: right;
  color: #2c3e50;
  text-decoration: none;
}
</style>